<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button class="btn1">启动临时定时器</button>
<button class="btn2">停止临时定时器</button>
<button class="btn3">启动循环定时器</button>
<button class="btn4">停止循环定时器</button>
<hr>
<p>计数器：<span>0</span></p>

<script>
    // 获取相关的元素对象
    let btn1 = document.querySelector('.btn1'); // 启动临时定时器
    let btn2 = document.querySelector('.btn2'); // 停止临时定时器
    let btn3 = document.querySelector('.btn3'); // 启动循环定时器
    let btn4 = document.querySelector('.btn4'); // 停止循环定时器
    let span = document.querySelector('span'); // 计数器
    // 注册事件
    let timer
    btn1.onclick = function () {
        // 创建定时器
        timer = setTimeout(function () {
            span.innerHTML = parseInt(span.innerHTML) + 1;
        }, 3000);
    }
    btn2.onclick = function () {
        // 停止定时器
        clearTimeout(timer);
    }
    btn3.onclick = function () {
        // 创建定时器
        timer = setInterval(function () {
            span.innerHTML = parseInt(span.innerHTML) + 1;
        }, 1000);
    }
    btn4.onclick = function () {
        span.innerHTML = 0; // 重置计数器
        // 停止定时器
        clearInterval(timer);
    }


</script>
</body>
</html>
